<template>
  <div class="tree-edit-node">
    <div
      class="flex flex-row justify-between"
      @mousedown="handleMouseDown"
      @mouseup="event => handleMouseUp(event, handleEditNode)"
    >
      <div class="flex flex-col">
        <div class="departmentName">
          {{ props.state.departmentName }}
        </div>
        <div class="tips mt-[20px]">
          {{ props.state.deptLevelName !== null ? "部门负责人" : props.state.position }}
        </div>
        <div class="name mt-[20px]">
          {{ props.state.userName }}
        </div>
      </div>

      <div>
        <div class="leval">
          {{ props.state.deptLevelName }}
        </div>
      </div>
    </div>

    <div
      v-if="props.state.isEditShow"
      class="add-icon"
      @mousedown="handleMouseDown"
      @mouseup="event => handleMouseUp(event, handleAddIcon)"
    >
      <el-icon :size="16">
        <Plus />
      </el-icon>
    </div>
    <div
      v-if="props.state.isEditShow"
      class="remove-icon"
      @mousedown="handleMouseDown"
      @mouseup="event => handleMouseUp(event, handleRemoveIcon)"
    >
      <el-icon :size="16">
        <Minus />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { cloneDeep } from "lodash-es";

// 定义组件的props
const props = defineProps({
  state: {
    type: Object,
    default: () => ({})
  }
});

// 定义组件的事件
const emits = defineEmits(["handleAddIcon", "handleRemoveIcon", "handleEditNode"]);

// 记录鼠标按下的时间
const mouseDownTime = ref<number>(0);

// 处理鼠标按下事件
const handleMouseDown = (event: MouseEvent) => {
  mouseDownTime.value = Date.now();
};

// 处理鼠标抬起事件，接受一个可选的操作函数
const handleMouseUp = (event: MouseEvent, action?: Function) => {
  const duration = Date.now() - mouseDownTime.value;
  if (duration > 1000) {
    console.log("大于一秒默认拖拽");
    // 在这里执行拖拽逻辑
  } else if (action) {
    action();
  }
};

// 处理编辑节点事件
const handleEditNode = () => {
  // 一级部门以上的卡片无新增或删除。修改按钮
  if (props.state.isEditShow) {
    emits("handleEditNode", cloneDeep(props));
  }
};

// 处理移除图标事件
const handleRemoveIcon = () => {
  emits("handleRemoveIcon", cloneDeep(props));
};

// 处理添加图标事件
const handleAddIcon = () => {
  emits("handleAddIcon", cloneDeep(props));
};
</script>
<style scoped lang="scss">
.tree-edit-node {
  position: relative;
  width: 350px;
  height: 160px;
  font-size: 24px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  padding: 14px 17px;
  border: 2px solid rgba(208, 208, 208, 1);
  cursor: pointer;
}

.departmentName {
  color: rgba(29, 33, 41, 1);
  font-size: 18px;
  line-height: 150%;
  font-weight: bold;
}

.tips {
  color: rgba(134, 144, 156, 1);
  font-size: 14px;
  line-height: 150%;
  text-align: left;
}

.name {
  color: rgba(78, 89, 105, 1);
  font-size: 18px;
  line-height: 150%;
  text-align: left;
  font-weight: bold;
}
.leval {
  color: rgba(134, 144, 156, 1);
  font-size: 14px;
  text-align: left;
}
.add-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  width: 30px;
  height: 30px;
  background-color: #e5e6eb;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #000000;
}
.remove-icon {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 30px;
  height: 30px;
  background-color: #e5e6eb;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #000000;
}
</style>
